<template>
	<div class="login-container">

		<vue-particles
        	color="#dedede"
	        :particleOpacity="0.7"
	        :particlesNumber="80"
	        shapeType="circle"
	        :particleSize="4"
	        linesColor="#dedede"
	        :linesWidth="1"
	        :lineLinked="true"
	        :lineOpacity="0.4"
	        :linesDistance="150"
	        :moveSpeed="3"
	        :hoverEffect="true"
	        hoverMode="grab"
	        :clickEffect="true"
	        clickMode="push"
      	>

      	</vue-particles>

		<div class="login-wrap" :style="{background:'url('+logo+')  center 30px no-repeat'}">
			<div class="login-box">
				<!-- <div class="no-account">还没有账号？<a @click="goRegister">注册</a></div> -->
				<!-- 三种登陆方式 -->
				<user-login></user-login>

			</div>

			<!-- <el-divider class="login-divider"><span>其他登陆方式</span></el-divider>

			<div class="login-menu">
				<a href="#">账号密码</a>
           		<a href="#">手机登录</a>
           		<a href="#">第三方登录</a>
			</div> -->
		</div>
	</div>
</template>

<script>
import UserLogin from "./userLogin";

	export default{
		components:{
			UserLogin
		},
		data(){
			return{
				logo:require('@/assets/logo.png'),
			}
		},
		methods:{
			goRegister(){
				this.$router.push({
					path:'/register'
				})
			},
			handeClear (status) {
				this.clear = status;
			}
		}
	}
</script>


<style>
	.login-container .el-form-item .el-form-item__label{
		color: #ffffff;
	}

	.login-divider .el-divider__text{
		padding: 5px 20px;
	}
</style>

<style scoped>
	.login-container{
		width: 100%;
		height:100%;
		background-size: cover;
		background-image: url("~@/assets/login_bg.jpg");
	}
	.login-wrap{
		position: absolute;
		top: 0;
		background-size: 185px;
    	padding: 90px 0 30px;
    	margin: 0 auto;
    	width: 425px;
    	left: 50%;
    	margin-left: -212px;
	}


	.no-account{
		font-size: 13px;
		text-align: center;
		color: #ffffff;
	}

	.no-account>a{
		font-weight: 700;
	}

	.login-divider{
		margin: 40px 0;
	}

	.login-menu{
		text-align: center;
	}

	.login-menu a{
		font-size: 14px;
		color: #ffffff;
		padding:0 20px;
	}
</style>